<template>
    <div>
        <ve-histogram
            :data="chartData"
            :settings="chartSettings"
            :extend="chartExtend"
            :data-zoom="dataZoom"
            height="350px"
        ></ve-histogram>
    </div>
</template>
 
<script>
import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
export default {
    props: ["lineData"],
    data() {
        let that = this;
        return {
            dataZoom: {
                type: "slider",
                show: that.lineData.length > 16?true:false,
                startValue:that.lineData.length - 15, //数据窗口范围的起始数值
                endValue: that.lineData.length - 1,
                height: 10,
                bottom: 40,
                fillerColor: "rgba(247, 186, 42,1)", //选中范围的填充颜色。
                borderColor: "transparent", //边框颜色。
                backgroundColor: "#adb4c3",
                dataBackground: {
                    //数据阴影的样式。
                    lineStyle: {
                        color: {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "transparent" // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "transparent" // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    }, //阴影的线条样式
                    areaStyle: false //阴影的填充样式,
                }
            },
            chartSettings: {
                showLine: [
                    "sessionsSub",
                    "sessionPercentageSub",
                    "pageViewsSub",
                    "pageViewsPercentageSub",
                    "buyBoxPercentageSub",
                    "unitSessionPercentageSub",
                    "totalOrderItemsSub",
                    "unitsOrderedSub",
                    "priceAvgSub"
                ],
                axisSite: { right: ["orderedProductSales"] },
                yAxisName: ["", "销售额"],
                labelMap: {
                    recordDate: "日期",
                    buyBoxPercentageSub: "购物车(%)",
                    orderedProductSales: "销售额￥",
                    pageViewsSub: "浏览量",
                    pageViewsPercentageSub: "浏览量(%)",
                    priceAvgSub: "平均价格￥",
                    sessionPercentageSub: "流量(%)",
                    sessionsSub: "流量",
                    totalOrderItemsSub: "订单量",
                    unitSessionPercentageSub: "转化率(%)",
                    unitsOrderedSub: "销量"
                }
            },
            chartExtend: {
                series: {
                    center: [-50, -50],
                    barMaxWidth: 30
                },
                legend: {
                    top: 20,
                    bottom: 20,
                    textStyle: {
                        color: "#000",
                        fontSize: 12
                    }
                },
                color: ["#409EFF", "#41dbbd", "#f44336", "#9c27b0","#3f51b5","#009688","#8bc34a","#ffeb3b","#ff9800","#795548","#607d8b"],
                tooltip: {
                    trigger: "axis",
                    formatter: function(params, ticket, callback) {
                        var htmlStr = "";
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            var xName = param.name; //x轴的名称
                            var seriesName = param.seriesName; //图例名称
                            var value = param.value; //y轴值
                            var color = param.color; //图例颜色
                            if (i === 0) {
                                htmlStr += xName + "<br/>"; //x轴的名称
                            }
                            htmlStr += "<div>";
                            htmlStr +=
                                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                                color +
                                ';"></span>';
                            //圆点后面显示的文本
                            htmlStr +=
                                seriesName +
                                ":" +
                                that.tooltipData(
                                    param.dataIndex,
                                    param.seriesName
                                );
                            htmlStr += "</div>";
                        }
                        return htmlStr;
                    }
                }
            },
            chartData: {
                columns: [
                    "recordDate",
                    "orderedProductSales",
                    "sessionsSub",
                    "sessionPercentageSub",
                    "pageViewsSub",
                    "pageViewsPercentageSub",
                    "buyBoxPercentageSub",
                    "unitSessionPercentageSub",
                    "totalOrderItemsSub",
                    "unitsOrderedSub",
                    "priceAvgSub"
                ],
                rows: []
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        load() {},
        getData() {
            let data = JSON.parse(JSON.stringify(this.lineData)).sort(
                (a, b) =>
                    new Date(a.recordDate).getTime() -
                    new Date(b.recordDate).getTime()
            );
            data.forEach(el => {
                let ALLDATA = this.ITEMALLDATA(el);
                let itemData = {};
                for (let i in el) {
                    let item = el[i];
                    if (i !== "recordDate") {
                        itemData[i + "Sub"] = item / ALLDATA;
                    }
                }
                Object.assign(el, itemData);
            });
            this.chartData.rows = data;
        },
        ITEMALLDATA(data) {
            let ALLDATA = 0;
            for (let e in data) {
                if (e !== "recordDate") {
                    ALLDATA += Number(data[e]);
                }
            }
            return ALLDATA;
        },
        tooltipData(key, name) {
            switch (name) {
                case "购物车(%)":
                    return this.chartData.rows[key].buyBoxPercentage;
                    break;
                case "销售额￥":
                    return this.chartData.rows[key].orderedProductSales;
                    break;
                case "浏览量":
                    return this.chartData.rows[key].pageViews;
                    break;
                case "浏览量(%)":
                    return this.chartData.rows[key].pageViewsPercentage;
                    break;
                case "平均价格￥":
                    return this.chartData.rows[key].priceAvg;
                    break;
                case "流量(%)":
                    return this.chartData.rows[key].sessionPercentage;
                case "流量":
                    return this.chartData.rows[key].sessions;
                    break;
                case "订单量":
                    return this.chartData.rows[key].totalOrderItems;
                    break;
                case "转化率(%)":
                    return this.chartData.rows[key].unitSessionPercentage;
                    break;
                case "销量":
                    return this.chartData.rows[key].unitsOrdered;
                    break;
                default:
                    return "";
                    break;
            }
        }
    },
    watch: {
        lineData: {
            handler: function() {
                this.dataZoom.show= this.lineData.length > 16?true:false,
                this.dataZoom.startValue = this.lineData.length - 15;
                this.dataZoom.endValue = this.lineData.length - 1;
                this.getData();
            },
            deep: true
        }
    },
    components: {
        veHistogram
    }
};
</script>